/**
 * @author wangyibo
 * @description 对vuex的定义和实例化库
 */
import Vue from "vue";
import Vuex from "vuex";
// 引入接口文件
import {rightApi} from '../apis/homeApi'
Vue.use(Vuex);
// 引入持久化插件   cnpm i -S vuex-persistedstate
import PersistState from 'vuex-persistedstate'
// 实例化store  并导出 
// 数据丢失，会需要用到第三方插件 数据持久化 vuex-persistedstate
export default new Vuex.Store({
    // 注入插件  数据就不会丢失了，数据存在localstorage里面， 
    plugins:[ PersistState({
        // 指定数据存储到sessionStorage
        storage:window.sessionStorage,
    })],
  modules: {
    // 定义模块名字
    common: {
      // 设置命名空间可用
      namespaced: true,
      // 初始化，定义缓存数据
      state: {
        // token是现在主要的权限保障机制，安全验证
        token: "",
        userInfo:{},
        userRight:[]
      },
      // 定义数据暴露方法，获取接口----getter方法--实际是一个数据值
      getters: {
        //语义化，可用把getter方法的名字和数据的名字取一样
        // 因为state和getter是同一级别的属性，要获取state的数据，只能是入参进来
        //token(state){ return state.token},
        // 简写
        // token:(state)=>state.token
        // 对象可用解构 {token}=state  里面取出来的token
        token: ({ token }) => token,
        userInfo:({userInfo})=>userInfo,
        userRight:({userRight})=>userRight
      },
      //   定义actions 来执行数据业务处理
      actions: {
        // 数据解构 {commit}===store.commit
        tokenEvt({commit}, token) {
          let newToken = "token-" + token;
          commit('setToken',newToken)
        },
        // 接收dispatch传递过来的数据  调用接口 获取用户角色信息
        async rightAct({commit},ids){
          let result=await rightApi(ids)
          // 把结果传递给mutations,进行数据扭转
          console.log('ids',result)
          commit('setRight',result.data)
        }
      },
      //   定义mutaitions 扭转数据
      mutations: {
          setToken(state, token) {
           state.token = token;
           console.log('所有热',token)
        },
        setUser(state,result){
        state.userInfo=result
        console.log('taitai热',result)
        },
        setRight(state,right){
          state.userRight=right
        }
      },
    },
  },
});
